﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo shows proportion between Red, Green and Blue  in custom color, represented in jqxBarGauge.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.arctic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbargauge.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollview.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script>
        $(document).ready(function ()
        {
            var colorArray = [];
            var rgbArray = [187, 255, 170];
            var disabled = false;
            var isRendered = false;
            var isClosed = false;

            $('#jqxbargauge').jqxBarGauge({
                width: 570,
                height: 570,
                values: rgbArray,
                max: 255,
                relativeInnerRadius: 0.5,
                startAngle: 0,
                endAngle: 90,
                colorScheme: 'rgb',
                customColorScheme: {
                    name: 'rgb',
                    colors: ['#307DD7', '#89A54E', '#AA4643']
                },
                title: {
                    text: 'jqxBarGauge',
                    font: {
                        size: 40
                    },
                    verticalAlignment: 'top',
                    margin: 0,
                    subtitle: {
                        text: '( visualization of "RGB" color proportions )',
                        font: {
                            size: 20
                        }
                    }
                },
                labels: { precision: 0, indent: 10 }
            });

            $('#redLevel').jqxSlider({theme: "arctic", mode: "fixed", min: 0, max: 255, ticksFrequency: 25.5, value: 170, step: 25.5 });
            $('#greenLevel').jqxSlider({ theme: "arctic", mode: "fixed", min: 0, max: 255, ticksFrequency: 25.5, value: 255, step: 25.5 });
            $('#blueLevel').jqxSlider({ theme: "arctic", mode: "fixed", min: 0, max: 255, ticksFrequency: 25.5, value: 187, step: 25.5 });

            var setColor = function ()
            {
                var red = $('#redLevel').val();
                var green = $('#greenLevel').val();
                var blue = $('#blueLevel').val();
                $('#jqxbargauge').val(new Array(blue, green, red));
            }

            $('#redLevel').on('change', function (event)
            {
                setColor();
            });
            $('#greenLevel').on('change', function (event)
            {
                setColor();
            });
            $('#blueLevel').on('change', function (event)
            {
                setColor();
            });
        });
    </script>
</head>
<body>
    <div id='jqxbargauge' style="float: left"></div>
    <div style="float: left">
        <span style="font-style: italic;">Red</span>
        <div id='redLevel'>
        </div>
        <span style="font-style: italic;">Green</span>
        <div id='greenLevel'>
        </div>
        <span style="font-style: italic;">Blue</span>
        <div id='blueLevel'>
        </div>
    </div>
</body>
</html>

